<!-- 销售订单详情页面 -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
  </pageHeader>
  <div class="demand-index">
    <div style="text-align: right; padding-bottom: 20px"
      ><a-space :size="20"
        ><a-button type="primary" @click="addSalesOutbound"
          >销售出库单</a-button
        >
        <!-- <a-button type="primary" @click="addProductionOrder"
          >生产订单</a-button
        > -->
      </a-space></div
    >
    <TableTurn :table-data="getDemandInfo" :args="args" ref="tableRef">
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        :width="80"
        title="物料编码"
        data-index="number"
        align="center"
      >
      </a-table-column>
      <a-table-column
        :width="80"
        title="物料名称"
        data-index="name"
        align="center"
        :ellipsis="true"
        :tooltip="{
          position: 'top',
        }"
      >
      </a-table-column>
      <a-table-column
        :width="80"
        title="规格型号"
        data-index="spec"
        align="center"
        :ellipsis="true"
        :tooltip="{
          position: 'top',
        }"
      >
      </a-table-column>
      <a-table-column
        :width="80"
        title="基本单位"
        data-index="number"
        align="center"
      >
      </a-table-column>
      <a-table-column
        :width="80"
        title="需求数量"
        data-index="amount"
        align="center"
        :ellipsis="true"
        :tooltip="{
          position: 'top',
        }"
      >
      </a-table-column>
      <!-- <a-table-column
        :width="80"
        title="交货日期"
        data-index="number"
        align="center"
      >
      </a-table-column> -->
      <a-table-column
        :width="80"
        title="本次占用数量"
        data-index="occupiedAmount"
        align="center"
      >
      </a-table-column>
      <a-table-column align="center" :width="400" title="库存量">
        <a-table-column
          align="center"
          title="库存总量"
          data-index="totalStock"
          :width="80"
        >
        </a-table-column>
        <a-table-column
          align="center"
          title="占用数量"
          data-index="occupiedStock"
          :width="80"
        >
          <template #cell="{ record }">
            <a-tooltip content="查看占用详情">
              <IconFont
                type="icon-details-def"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                @click="checkOccupied(record.id)"
              />
            </a-tooltip>
          </template>
        </a-table-column>
        <a-table-column
          align="center"
          title="空闲数量"
          data-index="freeStock"
          :width="80"
        >
        </a-table-column>
        <a-table-column
          align="center"
          title="已出库数量"
          data-index="outboundAmount"
          :width="80"
        >
        </a-table-column>
      </a-table-column>
      <a-table-column
        align="center"
        title="操作"
        data-index="safetyStock"
        :width="100"
        fixed="right"
      >
        <template #cell="{ record }">
          <!-- <a-space>
            <a-button
              type="text"
              
              
              >出库占用
            </a-button>
            <a-button
              type="text"
              :disabled="
                record.disabled ||
                record.scheduledProduceOrderNumber >= record.amount
              "
              @click="addSingleProduction(record)"
              >转生产订单</a-button
            ></a-space
          > -->
          <a-space>
            <a-tooltip content="出库占用">
              <IconFont
                type="icon-zhanyong"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                v-if="!record.disabled"
                @click="setOutboundOccupied(record)"
              />
            </a-tooltip>
            <a-tooltip content="转生产订单">
              <IconFont
                type="icon-zhuanshengchan-"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                v-if="!record.disabled"
                @click="addSingleProduction(record)"
              />
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
  </div>
  <checkOccupiedVue
    v-model:visible="OccupiedVisible"
    v-if="OccupiedVisible"
    :OccupiedId="OccupiedId"
    @occupiedEdit="occupiedEdit"
  />
  <OccupiedVue
    v-model:visible="OutboundVisible"
    :occupiedInfo="OccupiedInfo"
    @poductOccupiedEdit="poductOccupiedEdit"
  />
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import * as apiList from '@/api/order-management/client-order/index';
  import { putPoductOccupied } from '@/api/order-management/client-order/index';
  import { useRouter, useRoute } from 'vue-router';
  import { useOrderStore } from '@/store';
  import { Message } from '@arco-design/web-vue';
  import checkOccupiedVue from './checkOccupied/index.vue';
  import OccupiedVue from './occupancy/index.vue';

  const tableRef = ref();
  const OrderStore = useOrderStore();
  const route = useRoute();
  const router = useRouter();
  const breadCrumb: string[] = ['订单管理', '客户订单', '执行订单'];
  const title: string = '执行订单';
  const id = Number(route.query.id);
  const OccupiedVisible = ref(false);
  const OutboundVisible = ref(false);
  const OccupiedInfo = ref({});

  // 表格配置
  const args = reactive({
    stripe: true,
    rowSelection: {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: false,
    },
    scroll: {
      x: 2000,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'name', // 批量选择按钮以客户名称来作为key
  });

  const orderInfo = reactive({ list: {} });

  const getDemandInfo = async () => {
    try {
      let res = await apiList.GetOrderDetail({ id });
      orderInfo.list = res;
      res.orderProduct.forEach((i) => {
        if (i.outboundAmount === i.amount) {
          i.disabled = true;
        }
        // if (i.scheduledProduceOrderNumber === i.amount) {
        //   i.disabled = true;
        // }
      });
      return Promise.resolve(res.orderProduct);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 点击查看详情操作已占用库存量
  const OccupiedId = ref();
  const checkOccupied = (id?: any) => {
    OccupiedVisible.value = true;
    OccupiedId.value = id;
  };

  const addSalesOutbound = () => {
    if (tableRef.value.selectedList.length <= 0) return;
    OrderStore.getOutboundData = tableRef.value.selectedList;
    router.push({
      name: 'AddSalesOutbound',
      query: { id },
    });
  };

  const setOutboundOccupied = (record: any) => {
    OccupiedInfo.value = record;
    OutboundVisible.value = true;
  };
  // 出库暂用组件自定义事件
  const poductOccupiedEdit = async (val: any) => {
    const { id, Amount } = val;
    const res = await putPoductOccupied({ id, occupiedAmount: Amount });
    tableRef.value.selectedList = [];
    tableRef.value.selectedKeys = [];
    if (res) tableRef.value.loadData();
    // router.go(0);
  };

  // 查看详情组件自定义事件
  const occupiedEdit = async (val: any) => {
    const { id, Amount } = val;
    const res = await putPoductOccupied({ id, occupiedAmount: Amount });
    if (res) tableRef.value.loadData();
  };

  const addProductionOrder = () => {
    if (tableRef.value.selectedList.length <= 0) return;
    OrderStore.product = tableRef.value.selectedList;
    router.push({ name: 'AddProductionOrder', query: { id } });
  };

  const addSingleProduction = (val: any) => {
    OrderStore.product = [val];
    router.push({ name: 'AddProductionOrder', query: { id } });
  };

  const isDisabled = () => {
    return orderInfo.list.orderProduct.every((ele) => ele.disabled);
  };
</script>

<style scoped lang="less">
  .demand-index {
    width: 100%;
    padding: 10px;
    :deep(.arco-input[disabled]),
    :deep(.arco-textarea[disabled]) {
      -webkit-text-fill-color: #165dff;
    }
  }

  .success {
    position: absolute;
    right: 30px;
    background-color: #31c27c;
    color: #fff;
    border-radius: 100%;
    width: 50px;
    text-align: center;
  }

  .blacklist {
    position: absolute;
    right: 30px;
    background-color: red;
    color: #fff;
    margin-left: 20px;
    border-radius: 100%;
    width: 50px;
    text-align: center;
  }

  .confirm-button {
    display: flex;
    flex-direction: row-reverse;
    // justify-content: space-between;
  }
</style>
